<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title> 目标与源 合成</title>
    <style>
    canvas {
      border:1px solid #d3d3d3;
      margin-right:10px;
      margin-bottom:20px;
    }
</style>
  </head>
  <body>

    <canvas id="test1" width="300" height="300"></canvas>

<script>

var t1 = document.getElementById('test1');
var context1 = t1.getContext('2d');
context1.globalAlpha=0.8; //设置下一个矩形的透明度
context1.fillStyle="blue";
context1.fillRect(20,20,75,60);

context1.translate(75,60);  //根据上一点最后坐标 重新设置下一个x,y参考初始点
context1.globalAlpha=0.5; //设置下一个矩形的透明度
context1.fillStyle="green";
context1.fillRect(20,20,75,60);

context1.translate(75,60);  //根据上一点最后坐标 重新设置下一个x,y参考初始点
context1.globalAlpha=0.1; //设置下一个矩形的透明度
context1.fillStyle="red";
context1.fillRect(20,20,75,60);



var gco=new Array();  //建立数组对象
gco.push("source-atop");  //push在数组中
gco.push("source-in");
gco.push("source-out");
gco.push("source-over");
gco.push("destination-atop");
gco.push("destination-in");
gco.push("destination-out");
gco.push("destination-over");
gco.push("lighter");
gco.push("copy");
gco.push("xor");
for (n=0;n<gco.length;n++)
{
	document.write("<div id='p_" + n + "' style='float:left;'>" + gco[n] + ":<br>");  //写入 div 并在上面写了个id值随n的递加而改变
	var c=document.createElement("canvas");
	c.width=120;
	c.height=100;
	document.getElementById("p_" + n).appendChild(c);  //创建 插入 的canvas元素
	var ctx = c.getContext("2d");
	ctx.fillStyle="blue";
	ctx.fillRect(10,10,50,50);
	ctx.globalCompositeOperation=gco[n];
	ctx.beginPath();
	ctx.fillStyle="red";
	ctx.arc(50,50,30,0,2*Math.PI);
	ctx.fill();
	document.write("</div>");
}
</script>


  </body>
</html>
